<template>
  <view class="page">
    <view class="list">
      <view class="title">
        <text class="name">个人信息</text>
      </view>
      <view class="userInfo flexR">
        <view class="info">
          <text class="item_name">姓名</text>
          {{personalMap.name}}
        </view>
        <view class="info">
          <text class="item_name">性别</text>
          {{personalMap.gender}}
        </view>
        <view class="info">
          <text class="item_name">年龄</text>
          {{personalMap.age}}岁
        </view>
        <view class="info">
          <text class="item_name">婚否</text>
          {{personalMap.marry}}
        </view>
      </view>
    </view>
    
    <!-- <view class="list">
      <view class="title">
        <view class="">
          <text class="name">体检项</text>
          <text class="num">共{{checkDetailItemList.length}}项</text>
        </view>
      </view>
      <view v-for="(item,index) in checkDetailItemList" :key="item.detailitemid">
        
        <view class="item">
          <view class="item_name">{{item.detailitemname}}</view>
          {{item.result}}
        </view>
      </view>
    </view> -->
    
    <view class="list">
      <view class="title">
        <view class="">
          <text class="name">检查项</text>
          <text class="num">共{{checkItemList.length}}项</text>
        </view>
      </view>
      <view class="tform" v-for="(item,index) in checkItemList" :key="item.itemId">
        <view class="item flexR" @click="test(item)">
          <view class="item_name">{{item.itemname}}</view>
          {{item.show ? '收缩':'展开'}}
        </view>
        <template v-if="item.show">
          <view  class="tform-item">
            <view class="label">项目</view>
            <view class="right flexR">
              <view class="value">结果</view>
              <view class="value leftline">(标准)</view>
            </view>
          </view>
          <view  class="tform-item" v-for="(ite,index) in checkDetailItemList[item.itemId]" :key="ite.detailitemid">
            <view class="label">{{ite.detailitemname}}</view>
            <view class="right flexR">
              <view class="value">{{ite.result}}{{ite.unit}}   </view>
              <view class="value leftline" v-show="ite.reference">
                ({{ite.reference}})
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
    
    <!-- <view class="list">
      <view class="title">
        <view class="">
          <text class="name">图像</text>
          <text class="num">共{{checkItemImgList.length}}项</text>
        </view>
      </view>
      <view class="tform" v-for="(item,index) in checkItemImgList" :key="item.itemId">
        <view class="item">
          <view class="item_name">{{item.itemname}}</view>
        </view>
        <view  class="tform-item" v-for="(ite,index) in checkDetailItemList[item.itemId]" :key="ite.detailitemid">
          <view class="label">{{ite.detailitemname}}</view>
          <view>
            <img src="" alt="">
          </view>
        </view>
      </view>
    </view> -->
    
    <view class="list">
      <view class="title">
        <view class="">
          <text class="name">诊断结果</text>
        </view>
      </view>
      <view v-for="(item,index) in hisdiagnoList" :key="index">
        
        <view class="item">
          <view class="item_name">{{item.hisdiagno}}</view>
          {{item.sugess}}
        </view>
      </view>
    </view>
    
    <!-- <view class="tcard">
      <view class="title">
        <view class="">
          <text class="name">诊断原文件</text>
        </view>
      </view>
      <view class="wbv" style="position: relative;">
        <iframe :src="`/wxapp/static/pdfjs/web/viewer.html?file=${url}`"></iframe>
      </view>
    </view> -->
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import { getReportList} from '@/api/physical.js'
  export default {
    data() {
      return {
        hisdiagnoList: [],
        checkItemList: [],
        checkDetailItemList: [],
        personalMap: [],
        
        url: ''
      }
    },
    computed:{
      ...mapGetters(['userInfo', 'userList']),
    },
    created(opt) {
      // this.$on('getReportDetail', (report) => {
      //   alert(1)
      //   this.hisdiagnoList = report.hisdiagnoList
      //   this.checkItemList = report.checkItemList
      //   this.checkDetailItemList = report.checkDetailItemList
      //   this.personalMap = report.personalMap
      // })
      // let report = JSON.parse(decodeURIComponent(opt.report))
      
      // let report = JSON.parse(localStorage.getItem('report'))
      let report = uni.getStorageSync('report')
      this.hisdiagnoList = report.hisdiagnoList
      this.checkItemList = report.checkItemList
      this.checkItemImgList = report.checkItemImgList
      
      // this.checkDetailItemList = report.checkDetailItemList
      this.checkDetailItemList = Object.groupBy(report.checkDetailItemList, ({ itemId }) => itemId)
      this.personalMap = report.personalMap
      
      
      // this.viewFile()
    },
    methods: {
      test(item) {
        console.log(item.show)
        // item.show = !item.show
        this.$set(item, 'show', !item.show)
        console.log(item.show)
      },
      viewFile() {
        uni.request({
          url: 'http://www.chim.org.cn/zzs/zzdt/202404/d28a113b30814ac190dd42c527f626bb/files/471150c5e39847afb32026c1e2f36fc2.pdf',
          method: "GET",
          responseType: 'arraybuffer',
          // header: {
          //   fileType: 'pdf',
          // },
          success: (response) => {
            console.log(999999, response)
            let pdfData = response.data; //pdfData是后端返回的文件流
            let blob = new Blob([ pdfData], {
              type: 'application/pdf;charset=UTF-8'
            })
            pdfData = window.URL.createObjectURL(blob) //创建预览路径
            this.url = encodeURIComponent(pdfData)
            console.log(pdfData)
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
.list {
  flex: 1;
  padding: 16upx;
  background-color: #FFF;
  border-radius: 8px;
  overflow: auto;
  margin-bottom: 24upx;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-left: 24upx;
    margin-bottom: 12upx;
    &:before {
      content: '';
      width: 6upx;
      height: 28upx;
      background: #366AA4;
      border-radius: 6upx;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28upx;
      color: rgba(0,0,0,0.7);
    }
    .num {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24upx;
      color: rgba(0,0,0,0.4);
      margin-left: 24upx;
    }
  }
  .userInfo {
    justify-content: space-between;
    flex-wrap: wrap;
    >.info {
      width: 40%;
      padding: 12upx;
    }
  }
  .item {
    // display: flex;
    justify-content: space-between;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.5);
    line-height: 44upx;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 24upx 0;
  }
  .item_name {
    color: rgba(0,0,0,0.7);
    font-weight: 700;
    border: 0;
    padding: 0;
    margin-right: 24upx;
  }
}
.tform-item {
  gap: 16upx;
}
.label {
  flex-shrink: 0;
  width: 150upx;
}
.right {
  // flex: 1;
  // flex-shrink: 0;
  // width: 300upx;
  justify-content: space-between;
  .value {
    padding: 0 12upx;
  }
}
.wbv {
  // position: relative;
  // height: 500upx;
  // width: 100%;
  iframe {
    width: 100%;
    height: 1000upx;
    border: none;
    outline: none;
  }
}
.leftline {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 40upx;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
  }
}
</style>
